<template>
  <div>
    <p class="text-12px my1">
      <el-tag v-if="type == 2 && appType" :color="appType == 'wx' ? '#67C23A' : '#303133'" class="mr-3px" style="color: #fff" size="small">
        {{ appType == 'wx' ? '微信' : '抖音' }}
      </el-tag>
      <el-tag
        size="small"
        effect="dark"
        :type="getTagTypeByAddonType(type)"
        :color="getTagColorByAddonType(type)"
        :style="getTagStyleByAddonType(type)"
      >
        {{ typeName }}
      </el-tag>
    </p>
  </div>
</template>

<script setup>
// 定义组件名称
defineOptions({
  name: 'DkPlatformTypeTag'
})

// 定义props
const props = defineProps({
  type: {
    type: [Number, String],
    required: true
  },
  typeName: {
    type: String,
    required: true
  },
  appType: {
    type: String,
    default: ''
  }
})

// 应用类型对应的标签类型
const addonTypeTagMap = [
  { value: '0', type: 'info', color: '#e03131', borderColor: '#e03131', label: '系统插件' },
  { value: '1', type: 'success', color: '#67C23A', borderColor: '#85ce61', label: '微信公众平台' },
  { value: '2', type: 'primary', color: '#1890FF', borderColor: '#1890FF', label: '小程序集' },
  { value: '3', type: 'primary', color: '#0054E9', borderColor: '#4d8ffc', label: '企业微信' },
  { value: '4', type: 'danger', color: '#000000', borderColor: '#fbc4c4', label: '抖音H5' },
  { value: '5', type: 'primary', color: '#8A2BE2', borderColor: '#b08eff', label: '独立平台' }
]

// 根据应用类型获取标签类型
const getTagTypeByAddonType = (type) => {
  const typeStr = type.toString()
  const found = addonTypeTagMap.find((item) => item.value === typeStr)
  return found ? found.type : 'danger'
}

// 根据应用类型获取标签颜色
const getTagColorByAddonType = (type) => {
  const typeStr = type.toString()
  const found = addonTypeTagMap.find((item) => item.value === typeStr)
  return found && found.color ? found.color : null
}

// 根据应用类型获取标签样式，包括边框颜色
const getTagStyleByAddonType = (type) => {
  const typeStr = type.toString()
  const found = addonTypeTagMap.find((item) => item.value === typeStr)
  if (found && found.borderColor) {
    return {
      border: `1px solid ${found.borderColor}`
    }
  }
  return {}
}
</script>
